import Vue from 'vue'
import dataApi from '@/view/v/data-api'
import offsetxy from '@/modules/corejs/dom/offsetxy'
const vm = new Vue({
  data: {
    preview: false,
    activeIndex: -1,
    zIndexMax: 0,

    // 当前容器 / 实际容器(1080 * 1920)
    // 如果当前为 540，那么 scale 为 0.5
    // scale: 1,

    // 对应 controls 额外的设置属性
    // 编辑情况才会用到
    // 目前只有 滚动控件使用
    setControls: [
      // {
      //   roll: false // 是否滚动预览
      // }
    ]
  },
  computed: {
    core () {
      return dataApi.core
    },
    controls () {
      return dataApi.core.controls
    },
    // videosControls () {
    //   let videos = []
    //   this.controls.forEach(d => {
    //     if (d.type === 5) {
    //       videos.push(d)
    //     }
    //   })
    //   return videos
    // },
    currActiveItem () {
      return this.controls[this.activeIndex] || {}
    },
    currActiveItemSet () {
      return this.setControls[this.activeIndex]
    }
  },
  watch: {
    controls () {
      if (!this.actionControlStates) { // 重新覆盖性设置 controls 情况
        this.generateSetControls()
        this.zIndexMaxInit()
      }
    }
  },
  methods: {
    addControl (options, set = {}) {
      let { controls } = this
      controls.push(this.controlCenter(options))
      this.setControls.push(set)
      this.activeItem(controls.length - 1)
      this.actionControlStates = 'add'
    },
    delControl (index) {
      this.controls.splice(index, 1)
      this.setControls.splice(index, 1)
      if (this.controls.length) {
        if (this.activeIndex === index) {
          this.activeItem(0)
        }
      } else { // 如果控件被删光
        this.activeIndex = -1
        this.zIndexMax = 0
      }
      this.actionControlStates = 'del'
    },
    addImageControl () {
      this.addControl({
        // 1 图片; 2 幻灯片; 3 文本； 4 滚动文本； 5 视频
        type: 1,

        x: 0,
        y: 0,
        w: 500,
        h: 200,

        image: '',
        zIndex: ++this.zIndexMax
      })
    },
    addViewControl () {
      this.addControl({
        // 1 图片; 2 幻灯片; 3 文本； 4 滚动文本； 5 视频
        type: 2,

        x: 200,
        y: 100,
        w: 500,
        h: 200,
        timerInterval: 30000,
        images: [],
        zIndex: ++this.zIndexMax
      })
    },
    addTextControl () {
      this.addControl({
        // 1 图片; 2 幻灯片; 3 文本； 4 滚动文本； 5 视频
        type: 3,

        x: 200,
        y: 220,
        w: 300,
        h: 200,

        text: '',
        zIndex: ++this.zIndexMax
      })
    },
    addRollTextControl () {
      this.addControl({
        // 滚动文本
        type: 4,

        x: 400,
        y: 20,
        w: 300,
        h: 80,
        zIndex: 8,

        text: '',
        rollType: 1 // 1 上下；2 左右
      }, {
        roll: false
      })
    },
    addVideoControl () {
      this.addControl({
        // 视频
        type: 5,

        x: 620,
        y: 600,
        w: 260,
        h: 200,

        allowSound: false,
        videos: [
          // {
          //   name: 'flower',
          //   src: 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm'
          // }
        ]
      })
    },
    addCurrentDateControl () {
      this.addControl({
        type: 6,

        x: 620,
        y: 350,
        w: 460,
        h: 150,
        color: '#666'
      })
    },
    addWeatherControl () {
      this.addControl({
        // 天气
        type: 7,

        x: 600,
        y: 200,
        w: 200,
        h: 130,
        city: '广东省,深圳市',
        fontSize: 100,
        color: '#666'
      })
    },
    addCountdownControl () {
      var t = new Date()
      t.setDate(t.getDate() + 1)
      this.addControl({
        // 倒计时
        type: 8,

        x: 760,
        y: 0,
        w: 350,
        h: 200,
        startDate: t,
        themeText: '<p>离 <span style="color:#ffffff;"><span style="background-color:#2ecc71;">主题</span></span> 还有<br></p>',
        color: '#666',
        fontSize: 32
      })
    },
    addWebControl () {
      this.addControl({
        // web 控件
        type: 9,

        x: 760,
        y: 0,
        w: 350,
        h: 200,
        url: ''
        // url: 'http://192.168.1.171:8080/#/display'
      })
    },
    videoControlSoundSet (allow, controlIndex) {
      if (allow) {
        this.controls.forEach((control, index) => {
          control.allowSound = false
          if (control.type === 5 && controlIndex === index) {
            control.allowSound = true
          }
        })
      } else {
        this.controls[controlIndex].allowSound = false
      }
    },
    // 给控件生成居中 x y
    controlCenter (d) {
      let { eBox } = this
      let lxy = offsetxy(eBox)

      d.x = (innerWidth - d.w - 240) / 2 - lxy.left + eBox.scrollLeft
      d.y = (innerHeight - d.h - 10) / 2 - lxy.top + eBox.scrollTop
      return d
    },
    // 重置 zIndex，避免过大
    zIndexReset () {
      const { core, setControls } = this
      const { controls } = core

      // 先排序 setControls
      controls.forEach((d, i) => {
        setControls[i].zIndex = d.zIndex
      })
      setControls.sort(function (v1, v2) {
        return v1.zIndex - v2.zIndex // 升序：小 -> 大
      })

      controls.sort(function (v1, v2) {
        return v1.zIndex - v2.zIndex // 升序：小 -> 大
      })
      controls.forEach((d, i) => {
        d.zIndex = i
      })
    },
    // 根据 zIndex 初始最大的 zIndex
    zIndexMaxInit () {
      let max = 0
      this.controls.forEach(d => {
        if (d.zIndex > max) max = d.zIndex
      })
      this.zIndexMax = max
    },
    activeItem (index) {
      if (this.activeIndex === index) return
      let { controls } = this
      if (controls.length) {
        this.activeIndex = index
        this.currActiveItem.zIndex = ++this.zIndexMax
      }
    },
    // 生成 setControls 根据 controls
    generateSetControls () {
      let setControls = []
      this.controls.forEach(({ type }) => {
        if (type === 4) {
          setControls.push({
            roll: false
          })
        } else {
          setControls.push({})
        }
      })
      this.setControls = setControls
    }
  }
})
export default vm
